<template>
  <div class="page">
    <!-- page header -->
    <van-nav-bar
      class="page-header"
      left-text="返回"
      left-arrow
      fixed
      :z-index="100"
      @click-left="handleClickLeft"
      @click-right="handleClickRight"
    >
      <van-icon name="wap-nav" slot="right" />
    </van-nav-bar>
    <!-- page body -->
    <div class="page-body">
      <div class="container">
        <!-- article -->
        <div class="article">
          <h1 class="article-title">{{articleInfo.title}}</h1>
          <section class="article-meta">{{`${articleInfo.source} | ${articleInfo.create_time}`}}</section>
          <section class="article-abstract">{{articleInfo.abstract}}</section>
          <div class="article-cover aspectratio" w-116-76>
            <XImage class="aspectratio-content" :src="articleInfo.cover"/>
          </div>
          <section class="article-content" v-html="content"></section>
          <section class="article-tags">{{articleInfo.tags}}</section>
        </div>
        <!-- comment -->
        <div class="comment m-t-l">
          <div class="comment-title">
            <template v-if="total > 0"><a>{{total}}</a>条评论</template>
            <template v-else><span>暂无评论</span></template>
          </div>
          <!-- comment list -->
          <comment-list>
            <comment-item v-for="item in commentList" :key="item.id" :data="item"/>
          </comment-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import XImage from '~/components/Image'
import { CommentList, CommentItem } from '~/components/CommentList'
import article from '~/api/article'
import comment from '~/api/comment'

export default {
  name: 'App',
  components: {
    XImage,
    CommentList,
    CommentItem
  },
  computed: {
    content () {
      const { content } = this.articleInfo;
      return this.xssfilter(content)
      // return content;
    }
  },
  async asyncData ({ params }) {
    let articleData = await article.query({})
    let info = await article.info({ id: params.id })
    return {
      id: params.id,
      articleInfo: info,
      articleList: articleData.list
    }
  },
  data () {
    return {
      commentCtx: '',
      commentList: [],
      total: 0,
      loading: false
    }
  },
  mounted () {
    this.loadArticleComment()
  },
  methods: {
    async loadArticleComment() {
      let { list, pagination } = await comment.query({topicId: this.id})
      this.commentList = list
      this.total = pagination.total
    },
    async handleCommentBtnClick() {
      const topicId = Number(this.id)
      const topicType = 0
      const content = this.commentCtx
      try {
        this.loading = true
        let data = await comment.add({topicId, topicType, content})
        this.loading = false
        this.commentCtx = ''
        this.loadArticleComment()
      } catch (error) {
        console.log(error)
        this.loading = false
      }
    },
    handleClickLeft () {
      this.$router.go(-1);
    },
    handleClickRight () {

    }
  }
}
</script>

<style lang="scss" scoped>
  .container {
    padding: 0 16px;
  }

  .article {
    .article-title {
      font-size: 24px;
      line-height: 1.5;
      color: #222;
      margin-bottom: 16px;
    }
    .article-meta {
      font-size: 14px;
      color: #666666;
      margin-bottom: 16px;
    }
    .article-abstract {
      font-size: 16px;
      line-height: 2;
      color: #333333;
      margin-bottom: 16px;
    }
    .article-content {
      font-size: 16px;
      line-height: 2;
      color: #333333;
      margin-bottom: 16px;
    }
    .article-tags {
      font-size: 14px;
      color: #666666;
    }
  }

  .comment {
    .comment-title {
      font-size: 18px;
      line-height: 2;
    }
  }
</style>